<template>
  <div>
   <el-table v-loading='regionLoading' :data="regionData"
   border :tree-props="{children: 'children'}">
     <el-table-column label="区域名称" prop='name'></el-table-column>
     <el-table-column label="区域类型" prop='type'>
       <template slot-scope='scope'>
         <span>
           {{
             scope.row['type'] | regionFilter(typeOptions)
           }}
         </span>
       </template>
     </el-table-column>

     <el-table-column label="区域编码" prop='code'></el-table-column>
   </el-table>
  </div>
</template>
  
<script>
import axios from 'axios'
export default {
  name: 'administrativeRegion',
  componentTitle: '行政区域',
  data () {
    return {
      regionLoading:false,
      regionData:[],
      typeOptions:[
           {label:'省',value:'1'},
           {label:'市',value:'2'},
           {label:'区',value:'3'}
      ],
    
    }
  },
   filters: {
      regionFilter(value,options){
        let index =options.findIndex((item=>{
            return Number(item.value)===Number(value)
        })
        )
        if(index<0){
           return '-----'
        }else{
         return options[index].label
        }
      }
  },
  mounted(){
    this.getRegion()
  },
  methods:{
      
    getRegion(){

      this.regionLoading=true
      axios({
      url: 'http://192.168.200.251:8888/admin/region/list',
      method:'get',
      params:{
      },
      headers:{'shopping-admin-token':sessionStorage.getItem('shopping-admin-token')}
     
      
      }).then(res=>{
    
        this.regionLoading=false
        this.regionData=res.data.data.list
      })

    }

  }
}
</script>
